今天的進度完全卡關了...決定來把邏輯整理一下。

目前打算實作的功能，是在技能欄增加搜尋框，顯示輸入的技能，實際執行時就是要對 ngFor 內容進行filter，篩選其顯示內容。

以下找到幾種可能方法：

= = = 方法一 = = =

<input [(ngModel)]="query">
<div *ngFor="let item of items | search:'id,text':query">{{item.text}}</div>

import {Pipe, PipeTransform} from '@angular/core';

@Pipe({
  name: 'search'
})
export class SearchPipe implements PipeTransform {
  public transform(value, keys: string, term: string) {

    if (!term) return value;
    return (value || []).filter(item => keys.split(',').some(key => item.hasOwnProperty(key) && new RegExp(term, 'gi').test(item[key])));

  }
}

= = = 方法二 = = =

@Component({
  selector: 'shell',
  template: `
    <h3>Shell</h3><button (click)="toggle()">Toggle!</button>

<ng-container *ngIf="show">
  <div *ngFor="let thing of stuff">
    {{log(thing)}}
    <span>{{thing.name}}</span>
  </div>
</ng-container>
  `
})

export class ShellComponent implements OnInit {

  public stuff:any[] = [];
  public show:boolean = false;

  constructor() {}

  ngOnInit() {
    this.stuff = [
      { name: 'abc', id: 1 },
      { name: 'huo', id: 2 },
      { name: 'bar', id: 3 },
      { name: 'foo', id: 4 },
      { name: 'thing', id: 5 },
      { name: 'other', id: 6 },
    ]
  }

  toggle() {
    this.show = !this.show;
  }

  log(thing) {
    console.log(thing);
  }

}

= = = 方法三 = = =

  <ng-container *ngFor="let item of list; let odd = odd">
    <li *ngIf="odd">{{ item }}</li>
  </ng-container>

要達成想要的功能，搜尋網路文件大概總結出以上三種方法。但不曉得是哪個步驟錯誤，怎麼套用都無法成功，今天記錄一下實作過程，明天再繼續嘗試達成的方法。

= = = = =

你今天的努力，
是否有跟未來的夢想
同一個等級？